import { motion } from 'framer-motion';
import { useParams, Link, useNavigate } from 'react-router-dom';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { useLanguage } from '@/contexts/LanguageContext';
import { orders } from '@/lib/mockData';
import { cn } from '@/lib/utils';

// Order status type definition
type OrderStatus = 'order_placed' | 'payment_confirmed' | 'processing' | 'shipped' | 'delivered' | 'cancelled';

export default function OrderDetail() {
  const { id } = useParams<{ id: string }>();
  const { t } = useLanguage();
  const navigate = useNavigate();
  
  // Find order by ID
  const order = orders.find(o => o.id === Number(id));
  
  // Format price function
  const formatPrice = (price: number) => {
    return `$${price.toFixed(2)}`;
  };
  
  // Get status badge style and text
  const getStatusInfo = (status: OrderStatus) => {
    switch (status) {
      case 'order_placed':
        return { text: '订单已提交', className: 'bg-gray-100 text-gray-800' };
      case 'payment_confirmed':
        return { text: '付款已确认', className: 'bg-blue-100 text-blue-800' };
      case 'processing':
        return { text: '订单处理中', className: 'bg-purple-100 text-purple-800' };
      case 'shipped':
        return { text: '商品已发货', className: 'bg-yellow-100 text-yellow-800' };
      case 'delivered':
        return { text: '商品已送达', className: 'bg-green-100 text-green-800' };
      case 'cancelled':
        return { text: '订单已取消', className: 'bg-red-100 text-red-800' };
      default:
        return { text: status, className: 'bg-gray-100 text-gray-800' };
    }
  };
  
  // If order not found
  if (!order) {
    return (
      <div className="min-h-screen flex flex-col">
        <Navbar />
        <main className="flex-grow flex items-center justify-center py-16 bg-gray-50">
          <div className="bg-white rounded-xl shadow-md p-8 max-w-md text-center">
            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <i className="fa-solid fa-search text-gray-400 text-2xl"></i>
            </div>
            <h2 className="text-2xl font-bold text-gray-900 mb-2">订单未找到</h2>
            <p className="text-gray-600 mb-6">抱歉，我们无法找到您请求的订单信息</p>
            <button 
              onClick={() => navigate('/user')}
              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors shadow-md hover:shadow-lg"
            >
              <i className="fa-solid fa-arrow-left mr-2"></i>
              返回订单列表
            </button>
          </div>
        </main>
        <Footer />
      </div>
    );
  }
  
  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      
      <main className="flex-grow bg-gray-50 py-20">
        <div className="container mx-auto px-4">
          {/* Back button */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.3 }}
          >
            <button 
              onClick={() => navigate('/user')}
              className="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium mb-8 transition-colors"
            >
              <i className="fa-solid fa-arrow-left mr-2"></i>
              返回订单列表
            </button>
          </motion.div>
          
          {/* Order Detail Card */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              {/* Order Header */}
              <div className="p-6 border-b">
                <div className="flex flex-col md:flex-row md:justify-between md:items-start">
                  <div>
                    <h1 className="text-2xl font-bold text-gray-900 mb-1">订单 #{order.id}</h1>
                    <p className="text-gray-500">{order.date}</p>
                  </div>
                  <div className="mt-4 md:mt-0">
                    <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${getStatusInfo(order.status as OrderStatus).className}`}>
                      {getStatusInfo(order.status as OrderStatus).text}
                    </span>
                  </div>
                </div>
              </div>
              
              {/* Order Content */}
              <div className="p-6">
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                  {/* Shipping Information */}
                  <div className="lg:col-span-1">
                    <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                      <i className="fa-solid fa-truck text-blue-600 mr-2"></i>
                      收货信息
                    </h2>
                    <div className="bg-gray-50 p-4 rounded-lg">
                      <p className="font-medium text-gray-900">{order.shippingAddress.fullName}</p>
                      <p className="text-gray-600 mt-1">{order.shippingAddress.address}</p>
                      <p className="text-gray-600">{order.shippingAddress.city} {order.shippingAddress.zipCode}</p>
                      <p className="text-gray-600">{order.shippingAddress.country}</p>
                      <p className="text-gray-600 mt-2">电话: {order.shippingAddress.phone}</p>
                    </div>
                    
                    {/* Payment Information */}
                    <div className="mt-8">
                      <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                        <i className="fa-solid fa-credit-card text-blue-600 mr-2"></i>
                        支付信息
                      </h2>
                      <div className="bg-gray-50 p-4 rounded-lg">
                        <p className="font-medium text-gray-900">支付方式</p>
                        <p className="text-gray-600 mt-1">{order.paymentMethod}</p>
                        {order.trackingNumber && (
                          <>
                            <p className="font-medium text-gray-900 mt-4">物流单号</p>
                            <p className="text-gray-600 mt-1">{order.trackingNumber}</p>
                          </>
                        )}
                      </div>
                    </div>
                  </div>
                  
                  {/* Order Items and Summary */}
                  <div className="lg:col-span-2">
                    <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                      <i className="fa-solid fa-boxes text-blue-600 mr-2"></i>
                      商品信息
                    </h2>
                    
                    {/* Order Items */}
                    <div className="divide-y">
                      {order.products.map((product, index) => (
                        <div key={index} className="py-4 flex">
                          <div className="w-20 h-20 rounded-lg overflow-hidden flex-shrink-0">
                            <img 
                              src={product.image} 
                              alt={t(product.nameKey)}
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <div className="ml-4 flex-grow">
                            <h3 className="font-medium text-gray-900">{t(product.nameKey)}</h3>
                            <div className="flex justify-between items-center mt-2">
                              <div className="text-sm text-gray-500">
                                <span>数量: {product.quantity}</span>
                              </div>
                              <span className="font-semibold text-gray-900">
                                {formatPrice(product.price * product.quantity)}
                              </span>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                    
                    {/* Order Summary */}
                    <div className="mt-8">
                      <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                        <i className="fa-solid fa-calculator text-blue-600 mr-2"></i>
                        订单摘要
                      </h2>
                      <div className="bg-gray-50 p-4 rounded-lg">
                        <div className="flex justify-between py-2">
                          <span className="text-gray-600">商品小计</span>
                          <span className="text-gray-900">{formatPrice(order.subtotal)}</span>
                        </div>
                        <div className="flex justify-between py-2">
                          <span className="text-gray-600">运费</span>
                          <span className="text-gray-900">{formatPrice(order.shipping)}</span>
                        </div>
                        <div className="flex justify-between py-2">
                          <span className="text-gray-600">税费</span>
                          <span className="text-gray-900">{formatPrice(order.tax)}</span>
                        </div>
                        <div className="flex justify-between py-3 mt-2 border-t border-gray-200">
                          <span className="font-semibold text-gray-900">订单总计</span>
                          <span className="font-bold text-lg text-blue-800">{formatPrice(order.total)}</span>
                        </div>
                      </div>
                    </div>
                    
                    {/* Order Status Timeline */}
                    <div className="mt-8">
                      <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                        <i className="fa-solid fa-clock text-blue-600 mr-2"></i>
                        订单状态跟踪
                      </h2>
                      <div className="relative">
                        {/* Timeline Line */}
                        <div className="absolute left-3 top-0 bottom-0 w-0.5 bg-gray-200"></div>
                        
                        {/* Timeline Items */}
                        <div className="space-y-6">
                          {order.statusHistory.map((status, index) => (
                            <div key={index} className="relative">
                              <div className={`absolute left-0 w-6 h-6 rounded-full ${index === order.statusHistory.length - 1 ? 'bg-blue-600' : 'bg-gray-200'}`}></div>
                              <div className="ml-10">
                                <div className="flex justify-between items-start">
                                  <p className={`font-medium ${index === order.statusHistory.length - 1 ? 'text-blue-600' : 'text-gray-900'}`}>
                                    {status.description}
                                  </p>
                                  <p className="text-sm text-gray-500 whitespace-nowrap">{status.date}</p>
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                    
                    {/* Action Buttons */}
                    <div className="mt-8 flex flex-wrap gap-3">
                      <Link
                        to="/user"
                        className="px-4 py-2 border border-gray-300 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors flex items-center"
                      >
                        <i className="fa-solid fa-arrow-left mr-2"></i>
                        返回订单列表
                      </Link>
                      
                      {(order.status as OrderStatus) !== 'delivered' && (order.status as OrderStatus) !== 'cancelled' && (
                        <button
                          className="px-4 py-2 border border-red-300 bg-red-50 text-red-700 hover:bg-red-100 rounded-lg transition-colors flex items-center"
                        >
                          <i className="fa-solid fa-times mr-2"></i>
                          取消订单
                        </button>
                      )}
                      
                      <button
                        className="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors flex items-center ml-auto"
                      >
                        <i className="fa-solid fa-file-pdf-o mr-2"></i>
                        下载发票
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </main>
      
      <Footer />
    </div>
  );
}